<div>
  <div class="card-panel">
    <span>
      <b>{{ '店铺权限管理' | translate }}：</b>
      {{ '目前您已监控' | translate
      }}<b class="red-text"
        >{{ vm.table.count }}/{{ user.activeVersionInfo.shopCount }}</b
      >{{ '个店铺。' | translate }}
    </span>
  </div>
  <div class="container" style="position: relative;">
    <ngx-busy [busy]="busy"></ngx-busy>
    <div class="clearfix">
      <div class="left">
        <en-mark></en-mark>
      </div>
      <div class="right">
        <a mat-raised-button color="primary" (click)="add()" *ngIf="!addView">
          {{ '添加' | translate }}<i class="fa fa fa-plus pl5"></i>
        </a>
        <a mat-raised-button color="primary" (click)="add()" *ngIf="addView">
          <i class="fa fa-angle-left pr5" style="vertical-align: baseline;"></i>
          {{ '返回' | translate }}
        </a>
      </div>
    </div>
    <div class="table-view" [hidden]="addView">
      <table class="responsive-table bordered highlight" id="shopExport">
        <thead>
          <tr>
            <th
              *ngFor="let column of columns; let $index = index"
              st-sort
              [st-sort]="column"
              [st-sort-data]="param"
              (sortChanged)="sortChange($event)"
              [innerHTML]="column.title | translate"
              [ngClass]="column.class"
              [title]="column.title | translate"
            ></th>
            <th>{{ '监控' | translate }}</th>
          </tr>
        </thead>
        <tbody>
          <tr
            *ngFor="
              let shop of vm.table.shops
                | paginate
                  : { itemsPerPage: 10, currentPage: p, id: 'shops_table' };
              let $index = index
            "
          >
            <td>
              <p class="nick-p left-align" *ngIf="shop.shopName">
                <span
                  class="taobao-icon"
                  [ngClass]="{
                    'icon-service-tianmao': shop.shopType == '商城',
                    'icon-service-taobao':
                      shop.shopType == 'C店' || shop.shopType == null,
                    'icon-service-tianmaoguoji': shop.shopType == '天猫国际',
                    'icon-fest-quanqiugou': shop.shopType == '全球购'
                  }"
                ></span>
                <a
                  href="javascript:;"
                  class="normal text-overflow width180"
                  [innerHTML]="shop.shopName | highlight: param.shopName"
                  goDetail
                  [title]="shop.shopName"
                  [data]="shop"
                  type="monitorShopDetail"
                ></a>
                <!-- taoabao -->
                <a
                  class="grey-text"
                  goDetail
                  [title]="shop.shopName"
                  [data]="shop"
                  type="monitorShopDetail"
                  ><i class="fa fa-external-link cp f16"></i
                ></a>
              </p>
              <p *ngIf="!shop.shopName">{{ '该店铺已失效' | translate }}</p>
            </td>
            <td>
              <span
                style="display: none"
                hidden
                ng-bind="shop.shopLevelSrc"
              ></span>
              <img
                src="http://trender-static.oss-cn-hangzhou.aliyuncs.com/image/credit{{
                  shop.shopLevelType
                }}.png"
                style="width: 18px;"
                *ngFor="let i of shop.shopLevels; let $index = index"
              />
            </td>
            <td>
              {{ shop.productCount }}
            </td>
            <!-- 日销 -->
            <td>
              <span class="tm-yen">¥</span>{{ shop.sellMoney || 0 | bigNum }}
            </td>
            <td>{{ shop.sellAmount || 0 | number: 0 }}</td>
            <!-- 月销 -->
            <td>
              <span class="tm-yen">¥</span
              >{{ shop.monthSellMoney || 0 | bigNum }}
            </td>
            <td>{{ shop.monthSellAmount || 0 | number: 0 }}</td>
            <td>
              <monitor-slide-toggel
                type="shop"
                [data]="shop"
                [checked]="true"
              ></monitor-slide-toggel>
            </td>
          </tr>
          <tr *ngIf="vm.table.shops.length == 0">
            <td colspan="10" class="center-align">
              <span
                >{{ '暂无店铺监控' | translate }}&nbsp;<a
                  md-raised-button
                  color="primary"
                  (click)="add()"
                  >{{ '立即添加' | translate }}</a
                ></span
              >
            </td>
          </tr>
        </tbody>
      </table>
      <pagination-controls
        class="center-align pt20"
        id="shops_table"
        (pageChange)="p = $event"
        maxSize="9"
        directionLinks="true"
        autoHide="true"
      >
      </pagination-controls>
    </div>
    <div class="add-view" *ngIf="addView">
      <monitor-add type="shop"></monitor-add>
    </div>
  </div>
</div>
